import { DownloadOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
import { BackTop, Card, Col, Row, Table, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getUserWorks } from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';
import Goback2Top from '../../components/Goback2Top';
import { RouteComponentPropsPlus } from '../../util/routerBase';
import './index.scss';

type IPropsIndex = RouteComponentPropsPlus;

export default function Index(props: IPropsIndex): JSX.Element {
	const [currentTab, setCurrentTab] = useState('tabIndex0');
	return (
		<div>
			<Goback2Top />
			<div className="banner w100 d-f jc">
				<div className="w1200">
					<div className="banner-title">
						<div>专为4-10岁孩子打造的</div>
						<div>编程多维能力课</div>
					</div>
					<div className="mt32">
						<div className="btn-join">立即报名</div>
					</div>
					<div className="mt48 d-f mb30">
						<div className="banner-card d-f ac pl40">
							<img src={require('../../image/key.png').default} alt="" />
							<div className="fs16 pl30">
								<div className="pb8">帮助孩子</div>
								<div>打开人工智能的大门</div>
							</div>
						</div>
						<div className="banner-card ml20 d-f ac pl40">
							<img src={require('../../image/light.png').default} alt="" />
							<div className="fs16 pl30">
								<div className="pb8">抓住孩子</div>
								<div>思维训练黄金期</div>
							</div>
						</div>
						<div className="banner-card ml20 d-f ac pl40">
							<img src={require('../../image/ufo.png').default} alt="" />
							<div className="fs16 pl30">
								<div className="pb8">提升孩子</div>
								<div>升学竞争力</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div className="d-f jc">
				<div className="w1200">
					<div className="d-f jc ac ptb64">
						<div className="pr24">
							<img src={require('../../image/doctor.png').default} alt="" />
						</div>
						<div>
							<div className="fs26">
								<strong>为什么那么多家长让孩子学习编程?</strong>
							</div>
							<div className="ta-c">
								<img src={require('../../image/division.png').default} alt="" />
							</div>
							<div className="ta-c c-hint-b">Why learn programming</div>
						</div>
					</div>
					<div className="fs16 ta-c mb64">抓住4-12岁思维成长黄金期，提升孩子未来核心竞争力</div>

					<div className="d-f jc-b mb64">
						<div className="d-f fd-c jc-b">
							<div className="ta-c mb32">
								<img src={require('../../image/index16.png').default} alt="" />
							</div>
							<div className="bg-theme c-text-w br10 ptb24 plr20 w280 h182">
								<div className="fs20 pb20">
									<strong>抢先提升竞争力</strong>
								</div>
								<div>
									全球已有超24个国家将编程教育纳入中小学课程大纲及教学场景，全国多地将编程技术纳入高考范围
								</div>
							</div>
						</div>
						<div className="d-f fd-c jc-b">
							<div className="ta-c mb32">
								<img src={require('../../image/index15.png').default} alt="" />
							</div>
							<div className="bg-yellow c-text-w br10 ptb24 plr20 w280 h182">
								<div className="fs20 pb20">
									<strong>培养创新思维</strong>
								</div>
								<div>孩子逻辑思维、创造力、专注力、抗挫折能力、自主纠错能力多方位提升。</div>
							</div>
						</div>
						<div className="d-f fd-c jc-b">
							<div className="ta-c mb32">
								<img src={require('../../image/index14.png').default} alt="" />
							</div>
							<div className="bg-green c-text-w br10 ptb24 plr20 w280 h182">
								<div className="fs20 pb20">
									<strong>帮助全科进步</strong>
								</div>
								<div>
									掌握体系化学习方法和科学的思维链条，提升举一反三的能力。掌握体系化学习方法和科学的思维链条，提升举一反三的能力。
								</div>
							</div>
						</div>
						<div className="d-f fd-c jc-b">
							<div className="ta-c mb32">
								<img src={require('../../image/index13.png').default} alt="" />
							</div>
							<div className="bg-blue c-text-w br10 ptb24 plr20 w280 h182">
								<div className="fs20 pb20">
									<strong>赢在未来起跑线</strong>
								</div>
								<div>牛津大学预测美国未来有47%的工作大概率会被计算机取代。</div>
							</div>
						</div>
					</div>

					<div className="fs24 ta-c mb32">原来学习编程对孩子那么重要，我家孩子也试试</div>

					<div className="ta-c">
						<div className="btn-try fs18 plr34 ptb14">让我家孩子也试试</div>
					</div>

					<div className="d-f jc ac ptb64">
						<div className="pr24">
							<img src={require('../../image/doctor.png').default} alt="" />
						</div>
						<div>
							<div className="fs26">
								<strong>覆盖幼儿-少儿阶段的课程体系</strong>
							</div>
							<div className="ta-c">
								<img src={require('../../image/division.png').default} alt="" />
							</div>
							<div className="ta-c c-hint-b">课程体系根据ISTA儿童学习及发展指南ISTE-CT标准设置</div>
						</div>
					</div>

					<div className="ta-r">
						<img src={require('../../image/up.png').default} alt="" />
					</div>

					<div className="d-f jc-b c-text-w ta-c" style={{ alignItems: 'flex-end' }}>
						<div className="d-f ac jc w138 bg-yellow br10 fs18 strong" style={{ height: 80 }}>
							阶段难度
						</div>
						<div className="d-f ac jc h138 w416 br10" style={{ alignItems: 'flex-end' }}>
							<div className="p-r">
								<img src={require('../../image/p1.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>P1</strong>
								</div>
							</div>
							<div className="p-r">
								<img src={require('../../image/p2.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>P2</strong>
								</div>
							</div>
						</div>
						<div className="d-f ac jc h138 w605 br10" style={{ alignItems: 'flex-end' }}>
							<div className="p-r">
								<img src={require('../../image/s1.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>S1</strong>
								</div>
							</div>
							<div className="p-r">
								<img src={require('../../image/s2.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>S2</strong>
								</div>
							</div>
							<div className="p-r">
								<img src={require('../../image/s3.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>S3</strong>
								</div>
							</div>
							<div className="p-r">
								<img src={require('../../image/s4.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>S4</strong>
								</div>
							</div>
							<div className="p-r">
								<img src={require('../../image/s5.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>S5</strong>
								</div>
							</div>
							<div className="p-r">
								<img src={require('../../image/s6.png').default} alt="" />
								<div className="p-a c-text-w w100 h100 d-f jc ac t0 fs24">
									<strong>S6</strong>
								</div>
							</div>
						</div>
					</div>

					<div className="d-f jc-b c-text-w ta-c mt20">
						<div className="d-f ac jc w138 h138 bg-yellow br10 fs18 strong">课程系列</div>
						<div className="d-f ac jc h138 w416 bg-yellow br10">
							<div>
								<div className="fs30 strong">Play · 趣玩</div>
								<div className="fs18">玩出聪明大脑</div>
							</div>
						</div>
						<div className="d-f ac jc h138 w605 bg-theme br10">
							<div>
								<div className="fs30 strong">Study · 趣学</div>
								<div className="fs18">全面提升学习力</div>
							</div>
						</div>
					</div>

					<div className="d-f jc-b c-theme ta-c fs18 mt20">
						<div className="d-f ac jc w138 ptb26 bg-theme2 br10 strong">编程工具</div>
						<div className="d-f ac jc ptb26 w416 bg-theme2 br10 strong">趣玩编辑器</div>
						<div className="d-f ac jc ptb26 w605 bg-theme2 br10 strong">Scratch编辑器</div>
					</div>

					<div className="d-f jc-b c-icon-b ta-c mt20">
						<div className="d-f ac jc w138 ptb26 bg-title br10 fs18 strong">学习内容</div>
						<div className="d-f ac jc ptb26 w416 bg-title br10 plr16">
							学习简单的顺序执行、循环、并行、事件触发、参数、消息机制、变量等不同编程概念，完成简单的程序逻辑
						</div>
						<div className="d-f ac jc ptb26 w605 bg-title br10 plr26">
							学习顺序、循环、选择三种程序的基本结构，掌握事件触发、消息传递、变量、列表、克隆、函数、同步异步等编程知识，完成复杂的编程逻辑
						</div>
					</div>
				</div>
			</div>
			<div className="bg-theme3 d-f jc mt100 pb64">
				<div className="w1200">
					<div className="d-f jc ac ptb64">
						<div className="pr24">
							<img src={require('../../image/doctor.png').default} alt="" />
						</div>
						<div>
							<div className="fs26">
								<strong>三只狮子·培养未来创作者</strong>
							</div>
							<div className="ta-c">
								<img src={require('../../image/division.png').default} alt="" />
							</div>
							<div className="ta-c c-hint-b">Training future creators</div>
						</div>
					</div>
					<div className="d-f jc-b">
						<div>
							<div className="d-f ac">
								<img src={require('../../image/pan.png').default} alt="" />
								<div className="strong fs36 pl18">4大培养目标</div>
							</div>
							<div className="c-hint-b pt22 strong fs20">
								点燃兴趣帮助孩子爱上学习、培养习惯帮助孩子塑造人格
							</div>
							<div>
								<img className="pt96" src={require('../../image/indexBg.png').default} alt="" />
							</div>
						</div>
						<div>
							<div className="p-r">
								<img
									className="p-a"
									style={{ right: -30, top: -20 }}
									src={require('../../image/indexGroup1_1.png').default}
									alt=""
								/>
								<img src={require('../../image/indexGroup1_2.png').default} alt="" />
								<div className="p-a" style={{ left: 11, top: 40 }}>
									<img src={require('../../image/indexGroup1_3.png').default} alt="" />
									<div className="fs18 c-text-w p-a" style={{ right: 30, top: 7 }}>
										<strong>学习能力</strong>
									</div>
								</div>
								<div className="c-text-w p-a pr32" style={{ top: 90, left: 45 }}>
									高效快速获得外界知识，了解世界，拥抱变化。
								</div>
							</div>
							<div className="p-r mt32" style={{ right: 80 }}>
								<img
									className="p-a"
									style={{ right: -30, top: -20 }}
									src={require('../../image/indexGroup2_1.png').default}
									alt=""
								/>
								<img src={require('../../image/indexGroup2_2.png').default} alt="" />
								<div className="p-a" style={{ left: 11, top: 40 }}>
									<img src={require('../../image/indexGroup2_3.png').default} alt="" />
									<div className="fs18 c-text-w p-a" style={{ right: 30, top: 7 }}>
										<strong>逻辑思维</strong>
									</div>
								</div>
								<div className="c-text-w p-a pr32" style={{ top: 90, left: 45 }}>
									问题分析能力，抓住问题核心信息能力，解决问题的方法总结能力。
								</div>
							</div>
							<div className="p-r mt32" style={{ right: 160 }}>
								<img
									className="p-a"
									style={{ right: -30, top: -20 }}
									src={require('../../image/indexGroup3_1.png').default}
									alt=""
								/>
								<img src={require('../../image/indexGroup3_2.png').default} alt="" />
								<div className="p-a" style={{ left: 11, top: 40 }}>
									<img src={require('../../image/indexGroup3_3.png').default} alt="" />
									<div className="fs18 c-text-w p-a" style={{ right: 30, top: 7 }}>
										<strong>创新能力</strong>
									</div>
								</div>
								<div className="c-text-w p-a pr32" style={{ top: 90, left: 45 }}>
									眼光独到、具备非同寻常的想象力、创造性。
								</div>
							</div>
							<div className="p-r mt32" style={{ right: 240 }}>
								<img
									className="p-a"
									style={{ right: -30, top: -20 }}
									src={require('../../image/indexGroup4_1.png').default}
									alt=""
								/>
								<img src={require('../../image/indexGroup4_2.png').default} alt="" />
								<div className="p-a" style={{ left: 11, top: 40 }}>
									<img src={require('../../image/indexGroup4_3.png').default} alt="" />
									<div className="fs18 c-text-w p-a" style={{ right: 30, top: 7 }}>
										<strong>竞争协作</strong>
									</div>
								</div>
								<div className="c-text-w p-a pr32" style={{ top: 90, left: 45 }}>
									勇于接受挑战，平博向上的同时又互相理解，展现强大的协调能力
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div className="d-f jc mt100 pb64">
				<div className="w1200">
					<div className="d-f jc ac ptb64">
						<div className="pr24">
							<img src={require('../../image/doctor.png').default} alt="" />
						</div>
						<div>
							<div className="fs26">
								<strong>启发式教学·打造沉浸式学习体验</strong>
							</div>
							<div className="ta-c">
								<img src={require('../../image/division.png').default} alt="" />
							</div>
							<div className="ta-c c-hint-b">好课堂是让学习变得更好玩</div>
						</div>
					</div>
					<div className="d-f jc-b">
						<div>
							<div
								className={[
									'd-f jc ac w398 p-r ml128 h128 fs24 strong',
									currentTab === 'tabIndex0' ? 'tab-trigger-item-active' : 'tab-trigger-item',
								].join(' ')}
								onClick={() => setCurrentTab('tabIndex0')}
							>
								<span className="mr32">01</span>
								<span className="mr16">专业教研体系</span>
								{currentTab === 'tabIndex0' ? (
									<img src={require('../../image/indexPlayActive.png').default} alt="" />
								) : (
									<img src={require('../../image/indexPlay.png').default} alt="" />
								)}
							</div>
							<div
								className={[
									'd-f jc ac w398 p-r ml64 h128 mt18 fs24 strong',
									currentTab === 'tabIndex1' ? 'tab-trigger-item-active' : 'tab-trigger-item',
								].join(' ')}
								onClick={() => setCurrentTab('tabIndex1')}
							>
								<span className="mr32">02</span>
								<span className="mr16">沉浸式课堂</span>
								{currentTab === 'tabIndex1' ? (
									<img src={require('../../image/indexPlayActive.png').default} alt="" />
								) : (
									<img src={require('../../image/indexPlay.png').default} alt="" />
								)}
							</div>
							<div
								className={[
									'd-f jc ac w398 p-r h128 mt18 fs24 strong',
									currentTab === 'tabIndex2' ? 'tab-trigger-item-active' : 'tab-trigger-item',
								].join(' ')}
								onClick={() => setCurrentTab('tabIndex2')}
							>
								<span className="mr32">03</span>
								<span className="mr16">学币激励</span>
								{currentTab === 'tabIndex2' ? (
									<img src={require('../../image/indexPlayActive.png').default} alt="" />
								) : (
									<img src={require('../../image/indexPlay.png').default} alt="" />
								)}
							</div>
							<div
								className={[
									'd-f jc ac w398 p-r ml64 h128 mt18 fs24 strong',
									currentTab === 'tabIndex3' ? 'tab-trigger-item-active' : 'tab-trigger-item',
								].join(' ')}
								onClick={() => setCurrentTab('tabIndex3')}
							>
								<span className="mr32">04</span>
								<span className="mr16">聚焦薄弱</span>
								{currentTab === 'tabIndex3' ? (
									<img src={require('../../image/indexPlayActive.png').default} alt="" />
								) : (
									<img src={require('../../image/indexPlay.png').default} alt="" />
								)}
							</div>
							<div
								className={[
									'd-f jc ac w398 p-r ml128 h128 mt18 fs24 strong',
									currentTab === 'tabIndex4' ? 'tab-trigger-item-active' : 'tab-trigger-item',
								].join(' ')}
								onClick={() => setCurrentTab('tabIndex4')}
							>
								<span className="mr32">05</span>
								<span className="mr16">课堂报告</span>
								{currentTab === 'tabIndex4' ? (
									<img src={require('../../image/indexPlayActive.png').default} alt="" />
								) : (
									<img src={require('../../image/indexPlay.png').default} alt="" />
								)}
							</div>
						</div>
						<div className="flex1 ml96">
							{currentTab === 'tabIndex0' ? (
								<div className="d-f fd-c jc h100 tab-content-item">
									<div className="strong fs36">专业教研体系</div>
									<div className="fs20 c-hint-b pb20">
										专业的教研团队，紧跟教育部改革方向，提高核心模块能力，因材施教
									</div>
									<div>
										<img src={require('../../image/indexTab0.png').default} alt="" />
									</div>
								</div>
							) : null}
							{currentTab === 'tabIndex1' ? (
								<div className="d-f fd-c jc h100 tab-content-item">
									<div className="strong fs36">沉浸式课堂</div>
									<div className="fs20 c-hint-b pb20">
										动画演示丰富有趣互动课堂快乐解题，回放缓存随时学习
									</div>
									<div>
										<img src={require('../../image/indexTab1.png').default} alt="" />
									</div>
								</div>
							) : null}
							{currentTab === 'tabIndex2' ? (
								<div className="d-f fd-c jc h100 tab-content-item">
									<div className="strong fs36">学币激励</div>
									<div className="fs20 c-hint-b pb20">上课，答题有奖励，点燃兴趣促学习</div>
									<div>
										<img src={require('../../image/indexTab2.png').default} alt="" />
									</div>
								</div>
							) : null}
							{currentTab === 'tabIndex3' ? (
								<div className="d-f fd-c jc h100 tab-content-item">
									<div className="strong fs36">聚焦薄弱</div>
									<div className="fs20 c-hint-b pb20">
										人工智能+大数据，定位学习薄弱环节，重点学习更高效
									</div>
									<div>
										<img src={require('../../image/indexTab3.png').default} alt="" />
									</div>
								</div>
							) : null}
							{currentTab === 'tabIndex4' ? (
								<div className="d-f fd-c jc h100 tab-content-item">
									<div className="strong fs36">课堂报告</div>
									<div className="fs20 c-hint-b pb20">课后生成课堂报告，随时掌握学习情况</div>
									<div>
										<img src={require('../../image/indexTab4.png').default} alt="" />
									</div>
								</div>
							) : null}
						</div>
					</div>
				</div>
			</div>
			<Footer {...props} />
		</div>
	);
}
